a<template>
  <div class="BusinessIndicators" chief-style-set>
    <Title title='工程节点完成情况' more  :MoreUrl='MoreJump(this, "Construction", 1)'></Title>
    <div class="content-h-auto" chief-style-set>
      <template v-if="showList.length > 0">
        <div class="content-item" v-for="(item,index) in showList" :key="index + 'showList'">
        <div class="item-chart">
          <pie-charts :isloop='true' :pChartsOption='item.PieChartsOption'></pie-charts>
        </div>
        <div class="item-value">{{item.second}}</div>
        <div class="item-value">{{item.third}}</div>
        <div class="item-value">{{item.fourth}}</div>
        <div class="item-value">{{item.fifth}}</div>
      </div>
      </template>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import pieCharts from "@/components/portalEcharts/PieEcharts";
import { rptVisPrjEngnodefinish } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "BusinessIndicators",
  components: {
    Title, pieCharts
  },
  data () {
    return {
      showList: [],
      MoreJump
    };
  },
  created () {
    rptVisPrjEngnodefinish(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    disposeData (res) {
      if (res.status === 200) {
        let outputList = [];
        let list = res.data.data;
        list.forEach(item => {
          outputList.push({
            PieChartsOption: Object.assign({}, {
              value: item.data["实际值"],
              color: "#2A4177",
              needlabel: false,
              radius: ["30%", "60%"]
            }),
            second: item.name,
            third: `完成率：${item.data["完成率"]}`,
            fourth: `计划值：${item.data["计划值"]}`,
            fifth: `实际值：${item.data["实际值"]}`
          });
        });
        this.$nextTick(() => {
          this.showList = JSON.parse(JSON.stringify(outputList));
          // 为了让饼图组件监听到对象的变化
          setTimeout(() => {
            this.showList.forEach((item, index) => {
              Object.assign(this.showList[index].PieChartsOption, {
                change: true
              });
            });
            this.showList = outputList;
          });
        });
      }
    }
  }
};
</script>

<style lang="less">
.BusinessIndicators{
  .content-h-auto{
    display: flex;
    .content-item{
      flex: 1;
      display: flex;
      flex-direction: column;
      >div{
        flex: 1;
        text-align: center;
      }
      .item-chart{
        flex: 50%;
      }
    }
  }
}
</style>